<script setup>
import { ref } from 'vue';

// 定义单选框数据
const items = ref([
  {
    value: 'teacher',
    name: '导师',

  },
  {
    value: 'teacher',
    name: '辅导员'
  },
  {
    value: 'teacher',
    name: '学院分管副院长',
  },
  {
    value: 'teacher',
    name: '学院党委副书记',

  }
]);
const current = ref(0);
const RadioValue = ref('');
const radioChange =(evt)=>{
  RadioValue.value = evt.detail.value;
  console.info(RadioValue.value)
  for (let i = 0; i < items.value.length; i++) {
    if (items.value[i].value === evt.detail.value) {
      current.value = i;
      break;
    }
  }
}
</script>

<template>
<view class="back">
<!--  1-->
   <view class="text1">
     <text>请选择角色</text>
   </view>
<!--  2-->
  <view class="text2">
<text>切换将变更审批流程和管辖范围</text>
  </view>
<!-- 3单选框 -->
  <view class="box1">
    <view class="uni-list">
      <radio-group @change="radioChange">
        <label class="radioItem" v-for="(item, index) in items" :key="item.value">
          <view>
            <radio :value="item.value" :checked="index === current" />
          </view>
          <view class="radio text">{{item.name}}</view>
        </label>
      </radio-group>
    </view>
  </view>
</view>
</template>

<style scoped>
.uni-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 60rpx;
}
.radioItem{
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}
.radio text {
  margin-left: 20rpx;
  font-size: 32rpx;
}
.text1{
  width: 160px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 20px;
  color: #262626;
  margin: 10px;
}
.text2{
  width: 300px;
  height: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #5D5E5D;
  line-height: 22px;
  margin: 10px;

}
.box1{
  width: 351px;
  height: 200px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px 0 #E2E4EB;
  border-radius: 10px;
  margin: 10px;

}
.back{
  background-color: #F2F4F7;
  height: 680px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
}
</style>